<!DOCTYPE html>
<html lang="en" style="height: 100%;">
<head>
    <meta charset="UTF-8">
    <title>EMS-ADMIN</title>
  <link rel="stylesheet" href="../static/layui/css/layui.css"/>
  <link rel="stylesheet" href="../static/css/common.css"/>
  <link rel="shortcut icon" type="image/x-icon" href="../static/image/logo.ico">
</head>
<body class="body">
<div id="app" class="layui-row body">
  <!--侧边导航-->
  <div style="width: 200px;">
    <ul class="layui-nav layui-nav-tree layui-nav-side" lay-filter="menu">
      <div class="menu-head">
        <img src="../static/image/logo.png" style="height: 40px;">
        <span>EMS-ADMIN</span>
      </div>
      <li v-for="(menu, index) in state.menuList" :key="index" class="layui-nav-item">
        <a href="javascript:" :id="menu.id" :type="menu.type" :class="index === 0 ? 'layui-this' : ''">{{menu.label}}</a>
        <dl v-if="menu.children.length > 0" class="layui-nav-child layui-nav-child-c">
          <dd v-for="(child, index) in menu.children" :key="index">
            <a v-if="child.type !== '3'" href="javascript:" :id="child.id" :type="child.type" :rel="child.path">{{child.label}}</a>
          </dd>
        </dl>
      </li>
    </ul>
  </div>
  <div style="padding-left: 200px;" class="body">
    <!--头-->
    <div class="layui-row head">
      <div class="layui-col-md6" style="margin-left: 10px;">
      </div>
      <div class="layui-col-md6">
        <div style="float: right;margin-right: 50px;">
          <span id="username" class="username" lay-options="{trigger: 'hover'}">
            {{state.username}}
            <i class="layui-icon layui-icon-down layui-font-12"></i>
          </span>
        </div>
      </div>
    </div>
    <!--tab页面-->
    <div class="tab">
      <div class="layui-tab" lay-allowClose="true" lay-filter="tabs">
        <ul class="layui-tab-title"></ul>
        <div class="layui-tab-content">
          <div class="layui-table-item layui-show"></div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
<script src="../static/layui/layui.js"></script>
<script src="../static/js/axios.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script src="../static/js/http.js"></script>
<script src="../static/js/vue3.js"></script>
<script>
  const app = {
    setup(){
      const state = Vue.reactive({
        menuList: [],
        ids: [],
        breads: [],
        username: sessionStorage.getItem('username'),
        element: null,
      })

      Vue.onMounted(() => {
        getMenuTree()
      })

      const getHome = (menu) => {
        Vue.nextTick(() => {
          layui.use(['element', 'jquery'], function () {
            state.element = layui.element
            const $ = layui.jquery
            //  添加首页
            state.element.tabAdd('tabs', {
              title: menu.title,
              content: createIframe(menu.path),
              id: menu.id
            })
            //  添加id到已打开的id列表中
            state.ids.push(menu.id.toString())
            //  切换至首页
            state.element.tabChange('tabs', menu.id)
            //  隐藏首页关闭按钮
            $(".layui-tab ul").children('li').first().children('.layui-tab-close').css("display",'none');
          })
        })
      }

      const getMenuTree = () => {
        get('/api/sys/menu/tree', null).then(res => {
          if (res.success){
            state.menuList = res.data.menu
            //  将按钮权限保存进本地缓存中
            sessionStorage.setItem('btn', res.data.btn)
            getHome(state.menuList[0])
            Vue.nextTick(() => {
              //  监听事件
              state.element.on('nav(menu)', function (elem) {
                const id = elem.context.id
                const type = elem.context.type
                const title = elem.context.innerText
                let url = elem.context.rel

                //  新增tab
                if (state.ids.indexOf(id) === -1){
                  if (type === '2'){
                    state.element.tabAdd('tabs', {
                      title: title,
                      content: createIframe(url),
                      id: id
                    })
                    state.ids.push(id)
                    getTitle(id)
                  }
                }
                //  切换至当前tab
                state.element.tabChange('tabs', id)
              })

              //  删除tab
              state.element.on('tabDelete(tabs)', function (elem) {
                const index = elem.index
                state.ids.splice(index, 1)
                state.breads.splice(1, 1)
              })
              //  重新渲染
              state.element.render('nav')
            })
          }
        })
      }

      const getTitle = (id) => {
        state.breads = []
        state.menuList.forEach((item) => {
          if (item.children && item.children.length > 0){
            item.children.forEach((child) => {
              if (child.id + '' === id){
                state.breads.push(item)
                state.breads.push(child)
              }
            })
          } else {
            state.breads.push(item)
          }
        })
      }

      const createIframe = (url) => {
        return '<iframe src="'+url+'" class="iframe"></iframe>'
      }

      Vue.nextTick(() => {
        const dropdown = layui.dropdown
        dropdown.render({
          elem: '#username',
          align: 'center',
          data: [
            {
              title: '修改密码',
              id: 'updatePassword'
            },
            {
              title: '退出登录',
              id: 'logout'
            }
          ],
          style: 'text-align: center;',
          click: function (obj) {
            console.info(obj)
            if (obj.id === 'logout'){
              sessionStorage.setItem('token', null)
              sessionStorage.setItem('username', null)
              Cookies.set('token', null)
              window.location.href = '/login.html'
            }
          }
        })
      })
      return {
        state
      }
    }
  }
  Vue.createApp(app).mount('#app')
</script>
<style>
  .layui-tab{
    margin: 0;
  }

  .layui-tab-title{
    background-color: #FAFAFA;
    height: 30px;
    line-height: 30px;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .layui-tab .layui-tab-title li{
    height: 30px;
    line-height: 30px;
    font-size: 12px;
  }

  .layui-tab .layui-tab-title{
    height: 30px;
    line-height: 30px;
  }

  .layui-tab-title .layui-this{
    background-color: #5FB878;
    font-size: 12px;
    color: #fff;
    line-height: 30px;
  }

  .layui-tab-title .layui-this:after{
    height: 30px;
    border-style: none;
  }

  .layui-tab-content{
    padding: 0;
  }
  .username{
    cursor: pointer;
    font-size: 18px;
    color: #009688;
  }

  .layui-tab-title li .layui-tab-close{
    color: white;
  }

  .layui-tab-title li .layui-tab-close:hover{
    border-radius: 50%;
    background-color: #c2c2c2;
  }

  .layui-tab-title .layui-this::before {
    content: "";  /* 这是必需的，可以是空的 */
    display: inline-block;
    width: 10px;  /* 你可以根据需要调整这个值 */
    height: 10px;  /* 你可以根据需要调整这个值 */
    margin-right: 5px;  /* 在圆圈和文字之间添加一些空间 */
    background-color: #ffffff;  /* 将这个值改为你需要的颜色 */
    border-radius: 50%;  /* 这将使得元素形状为圆形 */
    vertical-align: middle;  /* 这将使得圆圈垂直居中 */
  }




</style>
</html>